<template>
  <div class="container">
    <!-- 顶部 -->
    <div :class="titleSelect === 0 ? 'top' : 'top1'">
      <div class="top-left">
        <el-image v-show="titleSelect === 2" :src="require('@/assets/images/dida2.jpg')" class="top-image"></el-image>
        <el-image v-show="titleSelect !== 2" :src="require('@/assets/images/dida1.png')" class="top-image"></el-image>
        <div class="top-text">滴 答 清 单</div>
      </div>
      <div class="top-right">
        <el-link class="top-link" v-for="(item, index) in titleList" :key="index" @click="titleClick(index)">{{ item.title
        }}</el-link>
        <el-link class="top-link" @click="login">登录</el-link>
        <el-link class="top-button">创建免费账号</el-link>
      </div>
    </div>
    <!-- 导航栏组件 -->
    <div>
      <component :is="activeCom"></component>
    </div>
    <!-- 底部 -->
    <div class="foot" :style="backgroundStyle(titleSelect, footSelect)">
      <div class="foot-body">
        <div class="body1">
          <div class="body1-box" v-for="(item, index) in footList" :key="index">
            <div class="body1-title">{{ item.title }}</div>
            <ul class="body1-ul" v-for="(ite, index) in item.ul" :key="index">
              <li class="body1-li">
                <el-link>{{ ite.name }}</el-link>
              </li>
            </ul>
          </div>
        </div>
        <div class="body2">
          <div class="body2-box1">
            <el-select v-model="value" placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="body2-box2">
            <div v-for="(item, index) in svgList" :key="index">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="body2-svg"
                :style="svgStyle(titleSelect)">
                <path fill="none" d="M0 0h24v24H0z"></path>
                <path v-for="(ite, index) in item.pathList" :key="index" :d="ite.path"></path>
              </svg>
            </div>
          </div>
        </div>
      </div>
      <div class="foot-bottom">
        <span>"© " 2023 仿照滴答清单官网样式 用于学习和练习</span>
      </div>
    </div>
  </div>
</template>

<script>
import FunctionIntroduction from "./Meun/FunctionIntroduction.vue";
import DownloadApplication from "./Meun/DownloadApplication.vue";
import SeniorMember from "./Meun/SeniorMember.vue";
import HelpCenter from "./Meun/HelpCenter.vue";
import router from "@/router";
export default {
  name: "PageTwo",
  components: {
    FunctionIntroduction,
    DownloadApplication,
    SeniorMember,
    HelpCenter,
  },
  data() {
    return {
      titleList: [
        {
          title: "功能介绍",
          isSelect: true,
          com: "FunctionIntroduction",
        },
        {
          title: "下载应用",
          isSelect: false,
          com: "DownloadApplication",
        },
        {
          title: "高级会员",
          isSelect: false,
          com: "SeniorMember",
        },
        {
          title: "帮助中心",
          isSelect: false,
          com: "HelpCenter",
        },
      ],
      activeCom: "FunctionIntroduction",
      footList: [
        {
          title: "产品",
          ul: [
            { name: "功能介绍" },
            { name: "下载应用" },
            { name: "高级会员" },
            { name: "教育优惠" },
            { name: "礼品卡" },
          ],
        },
        {
          title: "帮助",
          ul: [{ name: "帮助中心" }, { name: "FAQ" }],
        },
        {
          title: "资源",
          ul: [{ name: "URL Scheme" }],
        },
        {
          title: "团队",
          ul: [
            { name: "关于我们" },
            { name: "加入我们" },
            { name: "媒体素材" },
          ],
        },
        {
          title: "法律",
          ul: [
            { name: "使用条款" },
            { name: "隐私声明" },
            { name: "开源协议" },
          ],
        },
      ],
      svgList: [
        {
          pathList: [
            {
              path: "M18.3 10.5c.3.1.7-.1.8-.4.3-.8.1-1.8-.5-2.5s-1.6-1-2.5-.8c-.3.1-.6.4-.5.8.1.3.4.6.8.5.4-.1.9.1 1.2.4.4.3.4.8.3 1.2-.1.3.1.7.4.8z",
            },
            {
              path: "M20.6 5.7c-1.3-1.4-3.2-2-5-1.6-.4.1-.7.5-.6.9s.5.7.8.5c1.3-.2 2.7.2 3.6 1.2.9 1.1 1.2 2.5.8 3.7-.1.4.1.9.5 1 .4.1.9-.1 1-.5.6-1.7.3-3.7-1.1-5.2zM17.1 11.7c-.3-.1-.4-.1-.3-.5.3-.8.3-1.5 0-2-.7-.9-2.5-.9-4.5 0 0 0-.7.3-.5-.2.3-1 .2-1.8-.2-2.3-1.1-1.1-4.1.1-6.6 2.6-1.9 1.9-3 3.9-3 5.6 0 3.3 4.3 5.3 8.4 5.3 5.4 0 9-3.2 9.1-5.8 0-1.5-1.3-2.3-2.4-2.7zm-6.7 7c-3.3.4-6.2-1.1-6.4-3.3-.2-2.1 2.3-4.2 5.6-4.5 3.3-.4 6.2 1.1 6.4 3.3s-2.3 4.2-5.6 4.5z",
            },
            {
              path: "M10.7 12.5c-1.6-.4-3.4.4-4.1 1.8-.7 1.4 0 3 1.6 3.5 1.7.5 3.6-.3 4.3-1.8s-.2-3.1-1.8-3.5zm-1.3 3.6c-.3.5-1 .7-1.5.5-.5-.2-.6-.8-.3-1.3.4-.5 1-.7 1.4-.5.5.2.7.8.4 1.3zm1.2-1.3c-.1.2-.4.3-.6.2s-.3-.3-.2-.5c.1-.2.4-.3.6-.2.2.1.3.3.2.5z",
            },
          ],
        },
        {
          pathList: [
            {
              path: "M16 9.3c3.2 0 6 2.3 6 5.1 0 1.6-1 3-2.5 4.1l.5 1.7-1.9-1c-.7.2-1.4.3-2.1.3-3.4 0-6-2.3-6-5.1s2.6-5.1 6-5.1zM9.1 4c3.5 0 6.5 2.1 7.1 5h-.7c-3.3 0-6 2.5-6 5.6 0 .5.1 1 .2 1.5h-.6c-.9 0-1.6-.2-2.5-.3L4.1 17l.7-2.1C3 13.6 2 12 2 10c0-3.4 3.2-6 7.1-6zm5.1 8.1c-.2 0-.4.1-.5.2-.2.2-.2.3-.2.5s.1.4.2.5c.2.2.3.2.5.2s.4-.1.5-.2c.2-.2.2-.3.2-.5s-.1-.4-.2-.5c-.2-.1-.4-.2-.5-.2zm3.8 0c-.2 0-.4.1-.5.2-.2.2-.2.3-.2.5s.1.4.2.5c.2.2.3.2.5.2s.4-.1.5-.2c.2-.2.2-.3.2-.5s-.1-.4-.2-.5c-.1-.1-.3-.2-.5-.2zm-6.3-5.3c-.3 0-.5.1-.7.3-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3s.5-.1.7-.3c.2-.2.3-.4.3-.7s-.1-.5-.3-.7c-.1-.2-.4-.3-.7-.3zm-5 0c-.2 0-.5.1-.7.3-.2.2-.2.4-.2.7s.1.5.2.7c.2.2.4.3.7.3.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3z",
            },
          ],
        },
      ],
      options: [
        {
          value: "选项1",
          label: "中文",
        },
        {
          value: "选项2",
          label: "English",
        },
      ],
      value: "中文",
      titleSelect: 0,
      footSelect: 0,
    };
  },
  created() { },
  mounted() { },
  computed: {
    backgroundStyle() {
      return (item1, item2) => {
        if (item1 === 2 || item2 === 3) {
          return { background: "#1c1c1c", color: "#fff" };
        }
      };
    },
    svgStyle() {
      return (item) => {
        if (item === 2) {
          return { fill: "#fff" };
        }
      };
    },
  },
  methods: {
    titleClick(index) {
      this.titleList.forEach((el) => (el.isSelect = false));
      this.titleList[index].isSelect = true;
      this.activeCom = this.titleList[index].com;
      if (index === 2) {
        this.titleSelect = 2;
      } else if (index === 3) {
        this.footSelect = 3;
        this.titleSelect = 0;
      } else {
        this.titleSelect = 0;
        this.footSelect = 0;
      }
    },
    login() {
      //先退出再登陆，需完善
      this.$store.commit("clearToken");
      this.$store.commit("clearMenu");
      this.$router.push('/login')
    }
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;

  .top {
    // width: 1301px;
    width: 86.5%;
    height: 72px;
    background-color: #fff;
    border-bottom: 1px solid #f3f3f3;
    // box-shadow: 0 4px 8px 0 #f3f3f3;
    -webkit-box-shadow: 0 4px 8px 0 #f3f3f3;
    display: flex;
    flex: nowrap;
    line-height: 72px;
    padding: 0 50px;
    justify-content: space-between;
    position: fixed;
    // top: 0;
    z-index: 1000;

    // text-align: center;
    .top-left {
      display: flex;
      flex: nowrap;

      .top-image {
        width: 62px;
        height: 62px;
      }

      .top-text {
        color: #4772fa;
        margin-left: 10px;
        font-size: 20px;
      }
    }

    .top-right {
      display: flex;
      flex: nowrap;
      justify-content: space-around;

      .top-link {
        margin-right: 10px;
        cursor: pointer;
      }

      .top-link:hover {
        font-weight: 600;
        color: black;
      }

      .top-link:active {
        font-weight: 600;
        color: black;
      }

      .top-button {
        width: 120px;
        height: 36px;
        text-align: center;
        line-height: 36x;
        margin-top: 17px;
        border: 1px solid #dde0e7;
        border-radius: 10%;
      }

      .top-button:hover {
        color: black;
        border: 1px solid black;
        border-radius: 10%;
      }

      .top-button:active {
        color: black;
        border: 1px solid black;
        border-radius: 10%;
      }
    }
  }

  .top1 {
    // width: 1301px;
    width: 86.5%;
    height: 72px;
    background-color: #151618;
    color: #fff;
    // border-bottom: 1px solid #f3f3f3;
    // box-shadow: 0 4px 8px 0 #f3f3f3;
    // -webkit-box-shadow: 0 4px 8px 0 #f3f3f3;
    display: flex;
    flex: nowrap;
    line-height: 72px;
    padding: 0 50px;
    justify-content: space-between;
    position: fixed;
    // top: 0;
    z-index: 1000;

    // text-align: center;
    .top-left {
      display: flex;
      flex: nowrap;

      .top-image {
        width: 62px;
        height: 62px;
        background-color: #151618 !important;
      }

      .top-text {
        color: #4772fa;
        margin-left: 10px;
        font-size: 20px;
      }
    }

    .top-right {
      display: flex;
      flex: nowrap;
      justify-content: space-around;

      .top-link {
        margin-right: 10px;
        cursor: pointer;
      }

      .top-link:hover {
        font-weight: 600;
        color: #fff;
      }

      .top-link:active {
        font-weight: 600;
        color: #fff;
      }

      .top-button {
        width: 120px;
        height: 36px;
        text-align: center;
        line-height: 36x;
        margin-top: 17px;
        border: 1px solid #dde0e7;
        border-radius: 10%;
      }

      .top-button:hover {
        color: #fff;
        border: 1px solid #fff;
        border-radius: 10%;
      }

      .top-button:active {
        color: #fff;
        border: 1px solid #fff;
        border-radius: 10%;
      }
    }
  }

  .foot {
    width: 100%;
    height: 645px;
    // background-color: #fafafa;
    background: linear-gradient(to bottom, #fafafa, #fff);
    padding-left: 5px;
    padding-top: 60px;

    .foot-body {
      width: 100%;
      height: 336px;
      // border: 1px solid red;
      display: flex;
      justify-content: space-between;
      // padding-top: 40px;
      padding: 40px 20px 0 20px;
      text-align: center;

      .body1 {
        width: 75%;
        height: 240px;
        display: flex;
        flex: nowrap;

        // border: 1px solid red;
        .body1-box {
          width: 198px;
          height: 240px;

          .body1-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 30px;
          }

          .body1-ul {
            .body1-li {
              height: 20px;
              line-height: 20px;
              font-size: 14px;
              margin-bottom: 12px;
            }
          }
        }
      }

      .body2 {
        width: 25%;
        height: 254px;

        // border: 1px solid red;
        .body2-box1 {
          width: 200px;
          height: 46px;
        }

        .body2-box2 {
          width: 200px;
          height: 45px;
          margin-top: 10px;
          display: flex;
          flex: nowrap;
          justify-content: flex-end;

          .body2-svg {
            width: 24px;
            height: 24px;
            // fill: #fff;
            cursor: pointer;
            margin-left: 10px;
            // svg:first-child {
            //   margin-right: 10px;
            // }
          }
        }
      }
    }

    .foot-bottom {
      width: 83%;
      height: 18px;
      font-size: 14px;
      border-top: 1px solid #dcdcdc;
      margin-left: 80px;
      padding-top: 30px;
    }
  }
}
</style>
